1. 웹페이지 레이아웃 제작방법 _ GRID

1. GRID columns(열, 세로)

2. GRID row(행, 가로)

3. GRIP gap(여백)

4. GRID lind(여백)

2. GRID container(부모속성)

grid layout에서 부모 역할을 하기 위한 html 태그 요소이며 display: grid; display: inline-grid속성 값을 지정할 수 있음

부모 요소의 이름은 'wrap, wrapper, container', 자식요소의 이름은 'item'이라고 하며, 그리드는 column, row 아이템으로 구성됨

• display:grid, display:inline-grid : 그리드 적용하기
• grid-template-columns : 세로방향으로 나눌 개수
• grid-template-rows : 가로방향으로 나눌 개수
• grid - template : 행과 열을 한꺼번에 작성하고자 할 때
• grid - template -areas
• grid - gap, grid-column-gap, grid-row-gap : 행과 열사이 간격 설정
• justify-items, align-items, place-items
• justify-content, align-content, place-content
• grid-auto-rows, grid-auto-columns, grid-auto-flows

3. GRID item(자식속성)

gird 레이아웃에서 부모 요소의 자식요소들을 'item'이라고 하며 아이템들을 병합하고자 할 때, 열, 행번호, 영역의 이름을 따로 지정하여 설정 할 수 있음

• grid-columm : item의 열 시작위치 번호와 끝번호를 지정하여 병합하고자 할 때 사용. ex. 1/5
• grid-row : item의 행 시작위치 번호와 끝번호를 지정하여 병합하고자 할 때 사용. ex.1/3
• gird-column, grid-row 속성은 각각 grid-column-start, grid-column-end, grid-row-start, grid-row-end 속성으로도 사용 가능하다.
• gird-row-start, grid-column-end
• gird-row-start, grid-row-end
• grid-column, gird-row
• grid-area
• justify-self, align-self, place, self

css학습 참고 사이트 : https://www.w3schools.com/css/css_grid.asp

4. GRID item 속성_ naming 설정하기

열번호와 행번호를 이용하여 범위를 지정하지 않고 아이템에 각각 따로 이름을 설정하여 범위를 지정하는 방법

gird-area : 사용자가 사용할 자식 요소의 이름

        /* 그리드 네이밍_자식요소에 네이밍기법을 사용하여 그리드 레이아웃 적용하기 */
        .g_name{
          width: 90%; margin: 10px auto; padding: 6px;
          background: rgb(130,158,130);
          display: grid;
          grid-gap: 6px;
          grid-template-areas:
          "c01 c02 c03"
          "c04 c04 c06"
          "c07 c08 c06";
        }
        .g_name > div{background: #F5EEDC; height: 60px; text-align: center; line-height: 60px;}
        /* 각 셀들의 이름을 지정해주었다면 > gird-template-areas로 각 셀의 위치 지정 후 html 필요없는 셀은 지워줌  > 각 셀에 이름 지정해줌*/
        .g_name > .item1{grid-area: c01;}
        .g_name > .item2{grid-area: c02;}
        .g_name > .item3{grid-area: c03;}
        .g_name > .item4{grid-area: c04;}
        /* .g_name > .item5{grid-area: c05;} */
        .g_name > .item6{grid-area: c06; height: 126px;}
        .g_name > .item7{grid-area: c07;}
        .g_name > .item8{grid-area: c08;}
        /* .g_name > .item9{grid-area: c09;} */
      

실습1. 그리드 레이아웃 기본 개념잡기

        .g_wrap01{
          background: #555; width: 90%;
          margin: 10px auto; padding: 6px;
          display: grid;
          grid-gap: 6px;
          grid-template-columns: repeat(3,auto);
          grid-template-rows:repeat(3,60px);
        }
      
        .g_wrap01 > article{background: #ccc; text-align: center; line-height: 60px;}
      

실습2. 그리드 레이아웃 자식요소 병합하기

        .g_wrap02{
          background: #6db46d; width: 90%;
          margin: 10px auto; padding: 6px;
          display: grid;
          grid-gap:10px;
          grid-template-columns: repeat(3, auto);
          grid-template-rows: repeat(3, 60px);
        }
    
        .g_wrap02 > article{background: #ffff49; line-height: 60px; text-align: center;}
    
        /* 병합하기 병합 했으면 html code에서 병합한 셀 주석 처리로 없애주기 */
        .g_wrap02 > .i01{grid-area: 1/1/2/3;} 
      

실습3. 그리드 레이아웃을 활용한 이미지 갤러리